<script setup lang="ts">
// 接收属性
import {Menu} from "@element-plus/icons-vue";

defineProps(["isCollapse"]);
defineOptions({
    name:"Aside"
})
</script>

<template>
    <div class="aside">
        <el-row justify="center" align="middle" class="logo">
            <img :height="25" src="@/assets/images/logo.png" alt="">
            <h3 :style="{display:isCollapse?'none':'block'}">御医坊管理系统</h3>
        </el-row>
        <el-menu
            active-text-color="#ffd04b"
            background-color="#344056"
            class="el-menu-vertical-demo"
            default-active="2"
            :collapse="isCollapse"
            :collapse-transition="false"
            text-color="#fff"
        >
            <el-sub-menu index="1">
                <template #title>
                    <el-icon><location /></el-icon>
                    <span>Navigator One</span>
                </template>
                <el-menu-item-group title="Group One">
                    <el-menu-item index="1-1">item one</el-menu-item>
                    <el-menu-item index="1-2">item two</el-menu-item>
                </el-menu-item-group>
                <el-menu-item-group title="Group Two">
                    <el-menu-item index="1-3">item three</el-menu-item>
                </el-menu-item-group>
                <el-sub-menu index="1-4">
                    <template #title>item four</template>
                    <el-menu-item index="1-4-1">item one</el-menu-item>
                </el-sub-menu>
            </el-sub-menu>
            <el-menu-item index="2">
                <el-icon><Menu /></el-icon>
                <span>Navigator Two</span>
            </el-menu-item>
            <el-menu-item index="3" disabled>
                <el-icon><document /></el-icon>
                <span>Navigator Three</span>
            </el-menu-item>
            <el-menu-item index="4">
                <el-icon><setting /></el-icon>
                <span>Navigator Four</span>
            </el-menu-item>
        </el-menu>
    </div>

</template>

<style scoped lang="less">
    .aside{
        height: 100vh;
        background: #344056;
        .logo{
            background: #5d6678;
            height: 50px;
            //display: flex;
            //justify-content: center;
            //align-items: center;
            h3{
                padding-left: 5px;
                color:white;
                font-size: 18px;
                letter-spacing: 1px;
            }
        }
        .el-menu{
            border-right: none;
        }
    }
</style>